<template lang="">
  <!-- 权限分配的弹窗 -->
  <el-dialog title="权限分配" :visible="isShowDialog" @close="cancelFn">
    <!-- check-strictly:在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
            show-checkbox:子节点是否可被选择
        -->
    <el-tree
      ref="tree"
      :data="assignPermList"
      show-checkbox
      node-key="id"
      default-expand-all
      check-strictly
      :props="{label:'title'}"
    />
    <template>
      <el-row type="flex" justify="center">
        <el-button size="small" type="primary" @click="confirmAssignPerm">确认</el-button>
        <el-button size="small" @click="cancelFn">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
// 获取权限列表
import { getPermList } from '@/api/permissions.js'
import { getPermDetail, editRolePerm } from '@/api/rolemanage.js'
// 列表结构转树状图
import { listToTree } from '@/utils/index.js'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      assignPermList: [], // 权限列表数据
      currId: null // 保存编辑的id
    }
  },
  async created() {
    // 调用 获取权限列表接口
    this.assignPermList = listToTree(await getPermList(), '0')
    // console.log(25, this.assignPermList);
  },
  methods: {
    async getPerm(id) {
      // 保存被点击那条数据的id
      this.currId = id
      // 调用 根据id 获取权限接口 拿到里面的默认权限
      const res = await getPermDetail(id)
      // console.log(46, id, res);
      const permArry = res.permissions
      // 默认勾选的权限回显
      // console.log(51, permArry)
      const arr = permArry.map(item => item.id) // [343,456,322,566]
      this.$refs.tree.setCheckedKeys(arr)
    },
    // 弹窗的确认按钮
    async confirmAssignPerm() {
      // 获取被勾选的权限
      const permIds = this.$refs.tree.getCheckedKeys()
      // console.log(59,permIds);
      // 调用新增权限的接口 完成角色权限的新增
      await editRolePerm({
        id: this.currId,
        permissions: permIds
      })
      // 关闭弹窗
      this.cancelFn()
      // 刷新列表数据 子组键通知父组建即可以
      this.$emit('update')
    },
    // 关闭弹窗
    cancelFn() {
      this.$emit('update:isShowDialog', false)
    }
  }
}
</script>
<style lang="">

</style>
